<template>
  <div class="center">
    <div class="build_desc">
      <div>所属设备：{{detail.parentProductName}}
      </div>
      <div>
        所属设备编码：{{detail.parentDeviceCode}}  
         <el-tooltip class="more" effect="dark" content="设备详情" placement="top">
          <i class="iconfont gengduo1 " @click="doorLogClick"></i>
        </el-tooltip>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  props: ["detail"],
  components: {  },
  data() {
    return {
      deviceList: {
      },
      ProductList: [],
    };
  },
  computed: {},
  watch: {},
  methods: {
    // 跳转至详情
    doorLogClick(){
      // this.$parent.getpauseAudio()   // 停止铃声
      this.$emit('getpauseAudio')// 停止铃声
      // console.log(this.detail);
      this.detail.id=this.detail.parentId
      this.detail.imei=this.detail.parentDeviceCode
      this.$store.commit("saveDeviceInfo", this.detail); //保存信息，使页面刷新信息还存在
      this.$router.push("/device/host");
    },
  },
  created() {
  },
  mounted() { },
};
</script>

<style lang="less" scoped>
.fontSize (@px, @attr: font-size) {
  @vw: (@px / 1920) * 100;
  @{attr}:~"@{vw}vw";
}

.width (@px, @attr: width) {
  @vw: (@px / 1920) * 100;
  @{attr}:~"@{vw}vw";
}

.height (@px, @attr: height) {
  @vh: (@px / 1080) * 100;
  @{attr}:~"@{vh}vh";
}

.lineHeight (@px, @attr: line-height) {
  @vh: (@px / 1080) * 100;
  @{attr}:~"@{vh}vh";
}

.center {
  width: 100%;
  // height: 100%;

  .build_desc {
    padding: 0 1vw;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8299c9;
    //   background: #053d71;

    >div {
      .fontSize(16);
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    img {
      .width(16);
      height: auto;
      margin-right: 0.5vw;
    }
  }

  .center_title {
    text-align: center;
    margin-top: 8vh;
    .fontSize(20);
  }

  .detailsSystem {
    display: flex;
    width: 38vw;
    margin: 0 auto;
    background: url("../../../assets/images/datavPop/bottom.png") no-repeat center bottom;
    background-size: 45%;
    margin-top: 4vh;
    .fontSize(14);

    .details_left {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding-bottom: 3vh;

      .everySystemDevice {
        width: 59%;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        height: 100%;
        text-align: center;

        >div:first-of-type {
          .fontSize(16);
        }
      }

      .system_one {
        width: 14vw;
        height: 10vh;
        background: url("../../../assets/images/datavPop/upleft.png") no-repeat;
        background-size: 100% 100%;
      }

      .system_three {
        width: 14vw;
        height: 10vh;
        background: url("../../../assets/images/datavPop/leftLower.png") no-repeat;
        background-size: 100% 100%;
      }
    }

    .details_center {
      flex: 1;
      .fontSize(16);
      // padding-bottom: 8vh;
      position: relative;

      .details_imei {
        position: absolute;
        bottom: 13vh;
        left: 50%;
        transform: translateX(-50%);
        // width: 100%;
        width: 230px;
        text-align: center;
      }

      img:first-of-type {
        width: 10vw;
        margin-bottom: 20vh;
      }
    }

    .details_right {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-end;
      padding-bottom: 3vh;

      .everySystemDevice {
        width: 59%;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        height: 100%;
        text-align: center;

        >div:first-of-type {
          .fontSize(16);
        }
      }

      .system_four {
        width: 14vw;
        height: 10vh;
        background: url("../../../assets/images/datavPop/upperRight.png") no-repeat;
        background-size: 100% 100%;
        display: flex;
        justify-content: flex-end;
      }

      .system_six {
        width: 14vw;
        height: 10vh;
        background: url("../../../assets/images/datavPop/lowRight.png") no-repeat;
        background-size: 100% 100%;
        display: flex;
        justify-content: flex-end;
      }
    }
  }

  .systemBtn {
    margin-top: 4vh;
    width: 100%;
    display: flex;
    justify-content: center;

    .fire {
      border: 1px solid #eb564f;
      background: #261c47 !important;
    }

    .misdeclaration {
      border: 1px solid #f1b95c;
      background: #30304c !important;
    }

    .finish {
      border: 1px solid #58c0f9;
      background: #11295e !important;
    }

    .el-button {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      margin: 0 20px;
      .width(110);
      .height(48);

      ::v-deep span {
        display: flex;
        align-items: center;
        .fontSize(16);
      }
    }

    img {
      width: 1.1vw;
      margin-right: 5px;
    }
  }
}

.vidicon_div {
  // height: 80%;
  height: 450px;
  padding: 30px 20px 0 20px;
  box-sizing: border-box;
}

.gengduo1{
  margin-left: 5px;
  font-size: 18px;
  cursor: pointer;
  color: #09E8FC;
}
</style>